3
3
.
.
2
2
.
.
3
3
C
C
u
u
s
s
t
t
o
o
m
m
N
N
a
a
v
v
i
i
g
g
a
a
t
t
i
i
o
o
n
n
-
-
B
B
a
a
s
s
i
i
c
c
I
I
n
n
f
f
o
o
Android Compose currently doesn't support any Navigation Container.
So in this tutorial we will show how to implement simple list-detail navigation.
User is first presented with a list of items. Upon selecting an item screen with more details is shown.
MainActivity.kt
package com.example.myapplication
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.setContent
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
var showList = remember { mutableStateOf(true) }
var showDetails1 = remember { mutableStateOf(false) }
var showDetails2 = remember { mutableStateOf(false) }
if(showList.value) {
Column(Modifier.fillMaxSize()) {
Button({ showDetails1.value = true; showList.value = false }) { Text("Show Details 1") }
Button({ showDetails2.value = true; showList.value = false }) { Text("Show Details 2") }
}
}
if(showDetails1.value) {
Column(Modifier.fillMaxSize()) {
Text("Details 1")
Button({ showDetails1.value = false; showList.value = true }) { Text("Back") }
}
}
if(showDetails2.value) {
Column(Modifier.fillMaxSize()) {
Text("Details 2")
Button({ showDetails2.value = false; showList.value = true }) { Text("Back") }
}
}
}
}
}
List Details
